<template>
    <div class="about">
        <h2 class="news-title">关于我们</h2>
        <div class="news-list">
            <img :src="imgPath" alt="" class="news-image">
        </div>
        <div class="news-content-list">
            <p class="news-text">深圳市华胜迅科技有限公司（以下简称“华胜迅”）是香港TAMO TECHNOLOGY（HK）CO.,LTD旗下负责中国区市场运营的公司，香港TAMO
                TECHNOLOGY（HK）CO.,LTD自2003年成立以来一直专注于公安、旅游行业电子产品的研发与销售；产品畅销欧美多个国家和地区。</p>
            <p class="news-text">
                华胜迅成立于2012年，坐落于深圳市龙华新区民治街道梅坂大道民乐科技园；是国内专业提供公交报站器及多语言讲解系统，多通道音频解码系统设备的企业。是一个以科技为本，服务至上的高新技术企业。华胜迅始终专注于公安、旅游行业电子产品的研发与销售，目前公司主要的产品有：公交报站器、多语言讲解系统、多通道音频解码系统等。我们的产品已在美国、英国、法国、俄罗斯、迪拜、阿联酋等国家被广泛应用于城市观光、影视、游船、观光飞机、会议等领域。我们拥有自己强大的研发团队和技术支持团队，可以在提供持续的技术支持的同时为客户提供特殊的定制服务，以满足客户们的不同需求。
            </p>
            <p class="news-text">
                华胜迅拥有一整套严格的质量管理体制，对原料采购、产品生产、测试和安装每个环节都实行严格管控。所有量产前的产品均进行高要求性能测试，为客户带来产品质量的保证。我们将继续秉承“诚信务实、创新进取”的理念，致力于公安、旅游行业电子产品的应用，不断研发生产高新技术产品，为用户提供更优质的服务。
            </p>
        </div>
        <a target="_self" @click="$router.push('/qqkh')" class="service-links">了解更多</a>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getAboutInfo } from '@/api/about';

const imgPath = ref([]); // 初始化为空字符串，用于存储图片路径

onMounted(() => {
    getAboutInfo().then(res => {
        if (res.data != null) {
            imgPath.value = res.data.image_url ?? "";
        }
    });
});
</script>

<style lang="scss" scoped>
@media screen and (min-width: 1025px) {
    .about {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        padding: 0 150px;
    }

    .news-text {
        word-wrap: break-word;
        line-height: 2;
        font-size: 16px;
        margin-bottom: 10px;
    }

    .news-content-list {
        font-family: "微软雅黑";
    }

    .news-list {
        display: flex;
        border-top: 1px solid #ccc;
        padding-top: 20px;
        align-items: center;
        justify-content: center;
        align-content: center;
    }

    .news-title {
        font-size: 36px;
        text-align: center;
        line-height: 3;
    }

    .news-image {
        max-width: 100%;
        height: auto;
    }

    .service-links {
        display: block;
        border: 1px solid black;
        width: 128px;
        margin: 30px auto;
        font-size: 12px;
        text-align: center;
        padding: 10px 0;
        letter-spacing: 1px;
    }

    .service-links:hover {
        background-color: #409eff;
        color: white;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .about {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        padding: 0 100px;
    }

    .news-text {
        word-wrap: break-word;
        line-height: 2;
        font-size: 16px;
        margin-bottom: 10px;
    }

    .news-content-list {
        font-family: "微软雅黑";
    }

    .news-list {
        display: flex;
        border-top: 1px solid #ccc;
        padding-top: 20px;
        align-items: center;
        justify-content: center;
        align-content: center;
    }

    .news-title {
        font-size: 36px;
        text-align: center;
        line-height: 3;
    }

    .news-image {
        max-width: 100%;
        height: auto;
    }

    .service-links {
        display: block;
        border: 1px solid black;
        width: 128px;
        margin: 30px auto;
        font-size: 12px;
        text-align: center;
        padding: 10px 0;
        letter-spacing: 1px;
    }

    .service-links:hover {
        background-color: #409eff;
        color: white;
    }
}

@media screen and (max-width: 768px) {
    .about {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        padding: 0 20px;
    }

    .news-image {
        max-width: 100%;
        height: auto;
    }

    .news-text {
        word-wrap: break-word;
        line-height: 2;
        font-size: 16px;
        margin-bottom: 10px;
    }

    .news-content-list {
        font-family: "微软雅黑";
    }

    .news-list {
        word-wrap: break-word;
        line-height: 2;
        font-size: 16px;
        margin-bottom: 10px;
    }

    .news-title {
        font-size: 36px;
        text-align: center;
        line-height: 3;
    }

    .service-links {
        display: block;
        border: 1px solid black;
        width: 128px;
        margin: 30px auto;
        font-size: 12px;
        text-align: center;
        padding: 10px 0;
        letter-spacing: 1px;
    }

    .service-links:hover {
        background-color: #409eff;
        color: white;
    }
}
</style>